const breadcrumb = document.querySelector('.breadcrumb')
const tags = document.querySelector('.tags')
const hits = document.querySelector('.hits')
const briefText = document.querySelector('.brief_text')
const summary1 = document.querySelector('.summary1')
const summary2 = document.querySelector('.summary2')
const newchapter = document.querySelector('.newchapter')
const fansPay = document.querySelector('.fans_scrolling_wrapper')
const payList = document.querySelector('.fans_scrolling_wrapper')
const medal = document.querySelector('.author .medal')
const data = document.querySelector('.author .data')
const bookLists = document.querySelector('.booklists')
const beforeBtn = document.querySelector('.before-btn')
const afterBtn = document.querySelector('.after-btn')
const fansrank = document.querySelector('.fansrank .contents')
const pic = document.querySelector('.intro .pic')
const catalog = document.querySelector('.catalog')
const things = document.querySelector('.things')
const title = document.getElementById('title')
fetch(`https://app2.motie.com/pc/book/${window.location.search.split("=")[1]}/label`)
.then(res=>res.json())
.then(res1=>{
    breadcrumb.innerHTML =`
        <a href="../hzhlaikan.html">首页</a>
        <span>></span>
        <a href="">${res1.data.categoryVO.name}</a>
        <span>></span>
        <a href="">${res1.data.bookName}</a>
    ` 
}).catch(err=>{
    console.log(err)
})
fetch(`https://app2.motie.com/pc/book/${window.location.search.split("=")[1]}/detail`)
.then(res=>res.json())
.then(res1=>{
    title.innerHTML=`
        <p class="name">
            ${res1.data.bookName}
        </p>
        <p class="author">
            ${res1.data.authorName}
        </p>
        <p class="write">
            著
        </p>
    `
    pic.innerHTML=`
        <img src="${res1.data.bookPic}" alt="">
    `
    const tagsArr = res1.data.tags.split(" ").slice(0,3)
    tags.innerHTML=`
        ${res1.data.finish?'<a href="" class="isfinish">完结</a>':'<a href="" class="isfinish">连载</a>'}
        ${res1.data.sign?'<a href="" class="isfinish">签约</a>':''}
        ${res1.data.free?'':'<a href="" class="isfinish">VIP</a>'}
    `
    tagsArr.forEach(element => {
        tags.innerHTML+=`
            <a href="">${element}</a>
        `
    });
    hits.innerHTML=`
        <i></i>
        <span>${res1.data.words}字</span>
        <i></i>
        <span>总点击 ${res1.data.clickNum}</span>
        <i></i>
        <span>推荐票 ${res1.data.recommendName}</span>
    `
    const textArr = res1.data.content.split('\r\n')
    const newText =[]
    textArr.forEach(element=>{
        if(element!=''){
            newText.push(element)
        }
    })
    let text=newText.join('')
    briefText.innerHTML=`&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${text}`
}).catch(err=>{
    console.log(err)
})
fetch(`https://app2.motie.com/pc/book/${window.location.search.split("=")[1]}/intro`)
.then(res=>res.json())
.then(res1=>{
    summary1.innerHTML=`
        ${res1.data.content}
    `
    summary2.innerHTML=`
        <span>${res1.data.authorName}说:</span>
        ${res1.data.authorSay}
    `
    const time = new Date(res1.data.lastChapterTime).toLocaleString()
    newchapter.innerHTML=`
        <div class="newtitle">
            <span>最新章节:
            <img src="./img/VIP.gif" alt="">
            ${res1.data.lastChapterName}</span>
            <span>更新时间:${time}</span>
        </div>
        <p>${res1.data.lastChapterContent}</p>
    `
}).catch(err=>{
    console.log(err)
})
fetch(`https://app2.motie.com/pc/book/${window.location.search.split("=")[1]}/donate`)
.then(res=>res.json())
.then(res1=>{
    let pay=''
    res1.data.list.forEach(item=>{
        let payTime = new Date(item.createTime).toLocaleString()
        pay+=`
            <p>
                <span class="reader">
                    <i>${item.userName}</i>
                    打赏了
                    <i>${item.count}磨铁币</i>
                </span>
                <span class="paytime">
                    ${payTime}
                </span>
            </p>
        `
    })
    fansPay.innerHTML=`
        <div>${pay}</div>
        <div>${pay}</div>
    `
}).catch(err=>{
    console.log(err)
})
fetch(`https://app2.motie.com/pc/book/${window.location.search.split("=")[1]}/author`)
.then(res=>res.json())
.then(res1=>{
    medal.innerHTML=`
        <img src="${res1.data.authorPic}" alt="">
        <div class="name">
            <p>${res1.data.authorName}</p>
            ${res1.data.sign?'<span>签约作家</span>':''}
        </div>
    `
    data.innerHTML=`
        <div>
            <p>作品总数</p>
            <span>${res1.data.bookNum}</span>
        </div>
        <div>
            <p>累计字数</p>
            <span>${res1.data.words}</span>
        </div>
        <div>
            <p>驻站天数</p>
            <span>${res1.data.dayCount}</span>
        </div>
    `
    const bookPage=Math.ceil(res1.data.bookNum/2)-1
    for(let i=0;i<=bookPage;i++){
        bookLists.innerHTML+=`
            <div class="booklist">
                <div class="book">
                    <img src="${res1.data.books[i*2].bookPic}" alt="">
                    <span>${res1.data.books[i*2].bookName}</span>
                </div>
                ${(2*i+2)<=res1.data.bookNum?`<div class="book"><img src="${res1.data.books[i*2+1].bookPic}" alt=""><span>${res1.data.books[i*2+1].bookName}</span></div>`:''}
            </div>
        `
    }
    let placeNum=0
    function btn(){
        if(placeNum<bookPage*240){
            afterBtn.style.backgroundColor = '#ff4c2f'
        }else{
            afterBtn.style.backgroundColor = '#ccc'
        }
        if(placeNum>0){
            beforeBtn.style.backgroundColor = '#ff4c2f'
        }else{
            beforeBtn.style.backgroundColor = '#ccc'
        }
    }
    btn()
    afterBtn.onclick=()=>{
        if(placeNum>=bookPage*240){
            placeNum=placeNum
        }else{
            placeNum+=240
        }
        btn()
        bookLists.style.transform = `translateX(-${placeNum}px)`
    }
    beforeBtn.onclick=()=>{
        if(placeNum>0){
            placeNum-=240
        }
        btn()
        bookLists.style.transform = `translateX(-${placeNum}px)`
    }
}).catch(err=>{
    console.log(err)
})
fetch(`https://app2.motie.com/pc/book/${window.location.search.split("=")[1]}/follow?pageNo=1&pageSize=10`)
.then(res=>res.json())
.then(res1=>{

    fansrank.innerHTML+=`
        <div class="content">
            <div class="left">
                <div class="num">1</div>
                <div class="fansintro">
                    <p>${res1.data.items[0].userName}</p>
                    <span>粉丝级别:${res1.data.items[0].userLevel}</span>
                </div>
            </div>
            <div class="right">
                <img src="${res1.data.items[0].userPic}" alt="">
            </div>
        </div>
    `
    const fansArr = res1.data.items.slice(1,9)
    fansArr.forEach((item,index)=>{
        fansrank.innerHTML+=`
            <div class="content">
                <div class="left">
                    <div class="num">${index+2}</div>
                    <div class="fansintro">
                        <p>${item.userName}</p>
                    </div>
                </div>
                <div class="right">
                    <span>${item.userLevel}</span>
                </div>
            </div>
        `
    })
}).catch(err=>{
    console.log(err)
})
function tab(i){
    let tabs = document.querySelectorAll('.tab')
    tabs.forEach(item=>{
        item.classList.remove('on')
    })
    i.classList.add('on')
    if(tabs[0].classList.contains('on')){
        things.style.display = 'flex'
        catalog.style.display = 'none'
    }else if(tabs[1].classList.contains('on')){
        things.style.display = 'none'
        catalog.style.display = 'flex'
    }
}
fetch(`https://app2.motie.com/pc/book/${window.location.search.split("=")[1]}/catalog`)
.then(res=>res.json())
.then(res1=>{
    let catalogTxt=''
    res1.data.data.forEach(item=>{
            catalogTxt+=`
                ${item.volume?`<div class="catalog-title">${item.name}</div>`:`<div class="catalog-content"><div class="catalog-name">${item.name}</div>${item.free?'':`<img src="./img/VIP.gif" alt="">`}<div class="catalog-time">${item.publishTime}</div></div>`}
            `
    })
    catalog.innerHTML=catalogTxt
}).catch(err=>{
    console.log(err)
})